import {lazy,Suspense} from 'react';
import {Routes,Route,Navigate} from 'react-router-dom'

import Author from './Author'
import Loading from './Loading'
let Login = lazy(()=>import("../views/Login"));
let LayOut = lazy(()=>import("../views/Layout"));
let Users = lazy(()=>import('../views/users'));
let Roles = lazy(()=>import('../views/Roles'));
let Rights = lazy(()=>import('../views/Rights'));
let Goods = lazy(()=>import('../views/Goods'));
let Params = lazy(()=>import('../views/Params'));
let Cate = lazy(()=>import('../views/Cate'));
let Orders = lazy(()=>import('../views/Orders'));
let Reports = lazy(()=>import('../views/Reports'));
let Home = lazy(()=>import('../views/Home'));
let Addgoods = lazy(()=>import('../views/Addgoods'))
let routes:RoutesType = [
    {
        path:"/",
        element:<Navigate to={'/layout'} />,
        author:true
    },
    {
        path:"/login",
        element:<Suspense fallback={<Loading/>}><Login/></Suspense>,
        author:false
    },{
        path:"/layout",
        element:<Suspense fallback={<Loading/>}><LayOut/></Suspense>,
        author:true,
        children:[
            {
                path:"",
                element:<Navigate to={'home'}></Navigate>,
                author:true
            },
            {
                path:'users',
                element:<Suspense fallback={<Loading/>}><Users/></Suspense>,
                author:true
            }, {
                path:'roles',
                element:<Suspense fallback={<Loading/>}><Roles/></Suspense>,
                author:true
            }, {
                path:'rights',
                element:<Suspense fallback={<Loading/>}><Rights/></Suspense>,
                author:true
            }, {
                path:'goods',
                element:<Suspense fallback={<Loading/>}><Goods/></Suspense>,
                author:true
            }, {
                path:'params',
                element:<Suspense fallback={<Loading/>}><Params/></Suspense>,
                author:true
            }, {
                path:'categories',
                element:<Suspense fallback={<Loading/>}><Cate/></Suspense>,
                author:true
            }, {
                path:'orders',
                element:<Suspense fallback={<Loading/>}><Orders/></Suspense>,
                author:true
            }, {
                path:'reports',
                element:<Suspense fallback={<Loading/>}><Reports/></Suspense>,
                author:true
            }, {
                path:'home',
                element:<Suspense fallback={<Loading/>}><Home/></Suspense>,
                author:true
            }, {
                path:'addgoods',
                element:<Suspense fallback={<Loading/>}><Addgoods/></Suspense>,
                author:true
            }
        ]
    },
]

function RouterView(){

    return (
        <Routes>
            {
                routes.map((item:Routes,index:number)=>{
                    return <Route path={item.path} element={item.author?<Author element={item.element} path={item.path}/>:item.element} key={index}>
                        {
                            item.children && item.children.map((item2:Routes,index2:number)=>{
                                return <Route path={item2.path} element={item2.author?<Author element={item2.element} path={`${item.path}/${item2.path}`}/>:item2.element} key={index2}/>
                            })
                        }
                    </Route>
                })
            }
        </Routes>
    )
}

export default RouterView;